<template>
  <!-- 歌单广场 -->
  <div id="songLisSquare">
    <Navbar navbarText="歌单广场" />
    <van-tabs v-model="active" @click="handleTabClick">
      <van-tab v-for="(tag, index) in tabList" :key="index" :title="tag.name">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="10"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="content">
            <van-grid :column-num="3">
              <van-grid-item
                v-for="(play, index) in palyList"
                :key="index"
                @click="handleItemClick(play.id)"
              >
                <template #text>
                  <span class="van-multi-ellipsis--l2 playName">{{
                    play.name
                  }}</span>
                </template>
                <template #icon>
                  <van-image width="100" height="100" :src="play.coverImgUrl" />
                </template>
              </van-grid-item>
            </van-grid>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Navbar from "@/components/navbar";
import { getRecommendResource, getTopPlaylist } from "@/api/songSheet";
export default {
  name: "songLisSquare",
  data() {
    return {
      active: 0,
      tabList: [],
      palyList: [],
      page: {
        order: "hot",
        cat: "华语",
        limit: 21,
      },
      loading: true,
      finished: false,
    };
  },
  components: { Navbar },
  methods: {
    // 点击
    handleItemClick(id) {
      this.$router.push({
        path: "/songSheet",
        query: {
          id: id,
        },
      });
    },
    onLoad() {
      this.loading = true;
      this.page.limit = this.page.limit + 6;
      getTopPlaylist(this.page).then((res) => {
        if (res.playlists.length == 100) {
          this.finished = true;
        }
        this.palyList = res.playlists;
        this.loading = false;
      });
    },
    handleTabClick(name, title) {
      this.page.limit = 21;
      this.palyList = [];
      this.page.cat = title;
      getTopPlaylist(this.page).then((res) => {
        this.palyList = res.playlists;
        this.loading = false;
      });
    },
    initData() {
      getRecommendResource().then((res) => {
        this.tabList = res.tags.slice(0, 5);
      });
      getTopPlaylist(this.page).then((res) => {
        this.palyList = res.playlists;
        this.loading = false;
      });
    },
  },
  created() {
    document.title = "歌单广场";
    this.initData();
  },
};
</script>

<style scoped>
#songLisSquare .playName {
  font-size: 12px;
  height: 32px;
}
#songLisSquare /deep/ .van-image__img {
  border-radius: 9px;
}
</style>